<template>
  <div class="container">
    <div style="display: flex; justify-content: center; align-items: center">
      <div @click="isActive = !isActive" class="title" style="z-index: 999">
        <q-icon :name="isActive?'iconfont icontubiao-43':'iconfont icontubiao-44'" style="transform:rotate(270deg)" />
      </div>
    </div>
    <collapse>
      <div class="container-tool" v-show="isActive">
        <slot name="content"></slot>
      </div>
    </collapse>
  </div>
</template>
<script>
import collapse from 'src/assets/js/collapse.js'
export default {
  data () {
    return {
      isActive: true
    }
  },
  components: {
    collapse
  }
}
</script>

<style lang="stylus">
  .container {
    .container-tool {
      width: 100%
      /*background-color white*/
      /*border-top-left-radius:6px*/
      /*border-top-right-radius:6px*/
      /*border-bottom-right-radius:0em*/
      /*border-bottom-left-radius:0em*/
      position: relative
      z-index: 1
    }
    .title {
      background-color: #CFD6FE
      width: 24px
      height: 14px
      display: flex
      justify-content: center
      align-items: center
      border-bottom-left-radius:10px
      border-bottom-right-radius:10px
      border-top-right-radius:0em
      border-top-left-radius:0em
      cursor pointer
    }
  }
</style>
